<script setup>
import { ref } from 'vue'
import { readGoodsAPI, updateGoodsAPI } from '@/api/goods'
import FormDrawer from '@/components/FormDrawer.vue'
import Editor from '@/components/Editor.vue'
import { toast } from '@/composables/util'
const formDrawerRef = ref(null)
const dialogVisible = ref(false)
const form = ref({
  content: '',
  banners: []
})

const goodsId = ref(0)
const open = (row) => {
  goodsId.value = row.id
  row.contentLoading = true
  readGoodsAPI(goodsId.value).then(res => {
    form.value.content = res.content
    formDrawerRef.value.openDrawer()
  })
    .finally(() => {
      row.contentLoading = false
    })
}
const emit = defineEmits(['reloadData'])
const submit = () => {
  formDrawerRef.value.showLoading()
  updateGoodsAPI(goodsId.value, form.value)
    .then(res => {
      toast('设置商品详情成功')
      formDrawerRef.value.closeDrawer()
      emit('reloadData')
    })
    .finally(() => {
      formDrawerRef.value.hideLoading()
    })
}
defineExpose({
  open
})
</script>
<template>
  <FormDrawer title="设置商品详情" @submit="submit" destroy-on-close ref="formDrawerRef">
    <el-form :model="form">
      <el-form-item>
        <Editor v-model="form.content"></Editor>
      </el-form-item>
    </el-form>
  </FormDrawer>
  <el-drawer title="设置轮播图" v-model="dialogVisible" size="50%" :destroy-on-close="true">


  </el-drawer>

</template>
